<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_order.applyReturn }}</view>
				<view></view>
			</view>
		</view>

		<!-- 选项 -->
		<view class="u-f-26 u-lh-36">
			<view class="return-item flex-center-between" @click="logCompanyList.length && (selectVisible = true)">
				<view>{{ logCompany.name || lang_order.selectLogCompany }}</view>
				<u-icon style="transform: rotate(90deg);" name="arrow-right" size="24" color="#ACACAC"></u-icon>
			</view>

			<view class="return-item flex-center-between">
				<input v-model="form.logisticsNumber" :placeholder="lang_order.logisticsNumberTips" style="width: 100%;" />
			</view>

			<!-- <view class="return-item flex-center-between">
				<input placeholder="填写联系方式" style="width: 100%;" />
			</view> -->
		</view>

		<!-- 留空 -->
		<view style="height: 200rpx"></view>

		<!-- 提交按钮 -->
		<x-fixed-bottom background="rgba(0,0,0,0)">
			<view class="flex-center-center u-p-b-40">
				<x-common-btn @click="saveAction" :disabled="!authSubmit">{{ lang_common.done }}</x-common-btn>
			</view>
		</x-fixed-bottom>

		<!-- 选择器 -->
		<u-picker mode="selector" v-model="selectVisible" :default-selector="[logCompanyIndex]" :range="logCompanyList"
			range-key="name" @confirm="changeLogCompany"></u-picker>
	</view>
</template>

<script>
	import {
		refundSetRefundLogistics,
		refundLogCompanyList
	} from '@/api/user/saled.js'
	export default {
		data() {
			return {
				selectVisible: false,
				logCompanyIndex: 0,
				logCompanyList: [],
				
				form: {},
				
				logCompanyFormList: [
					{ tips: '请填写快递单号', key: 'logisticsNumber' },
					{ tips: '请选择快递', key: 'logisticsCompany' },
				],
				
				isClick: false
			}
		},
		computed: {
			authSubmit() {
				let { logisticsNumber } = this.form
				if (!logisticsNumber || !this.logCompany.id) return false
				return true
			},
			logCompany() {
				return this.logCompanyList[this.logCompanyIndex] || {}
			}
		},
		onLoad({
			orderNumber
		}) {
			this.$set(this.form, 'orderNumber', orderNumber)
			this.initLogCompany()
		},
		methods: {
			// 快递公司选项发生改变后
			changeLogCompany(value) {
				this.logCompanyIndex = value[0]
			},
			// 表单提交
			saveAction() {
				this.$set(this.form, 'logisticsCompany', this.logCompany.id)
				let list = this.logCompanyFormList
				for (let i = 0, len = list.length; i < len; i++) {
					let { key } = list[i]
					if (!this.form[key]) return this.$api.msg(this.lang_order[key + 'Tips'])
				}
				if (this.isClick) return;
				this.isClick = true
				refundSetRefundLogistics(this.form).then(() => {
					this.$api.msg('提交成功')
					let timer = setTimeout(() => {
						this.isClick = false
						this.jumpBack()
					}, 1000)
				}).catch(() => { this.isClick = false })
			},
			// 初始化快递公司列表
			initLogCompany() {
				refundLogCompanyList({}).then(data => {
					this.logCompanyList = data
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.return-item {
		padding: 38rpx 44rpx 38rpx 40rpx;
		margin-bottom: 2rpx;
		background-color: #FFFFFF;
	}
</style>
